<template>
	<view class="animated fadeIn faster page-bg">
		<view class="d-flex d-flex-column d-flex-middle" style="padding-top: 300rpx;">
			<view class="mb-1">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/basicprofile.png"
					style="width: 150rpx;height: 150rpx;border-radius: 75rpx;"></image>
			</view>
			<view class="font26 color666 mb-5">CH电竞</view>
			
			<view class="px-3" style="width: 690rpx;">
				<button class="wxbutton" :disabled="isLogin" open-type="getPhoneNumber"
					@getphonenumber="decryptPhoneNumber" v-if="isChecked">{{isLogin?'登陆中...':'手机号快捷登录'}}</button>
				<button class="wxbutton" v-else @click="setCheck">手机号快捷登录</button>
			</view>
			<view class="mb-3 d-flex d-flex-middle line-height0" style="margin-top: 20rpx;">
				<checkbox :checked="isChecked" color="#598dfc" style="transform:scale(0.6)"
					@click="isChecked = !isChecked"></checkbox>
				<text class="font24 color999" @click="isChecked = !isChecked">已阅读并同意</text>
				<text class="font24 main-color">《用户协议》</text>
				<text class="font24 color999">和</text>
				<text class="font24 main-color">《隐私条款》</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {USER_TOKEN} from '@/constants/local-storage-key-const';
	import {userApi} from '@/http/userApi.js';
	import store from '@/store/index.js';
	import uniIm from '@/uni_modules/uni-im/sdk/index.js';
	export default {
		data() {
			return {
				isLogin: false,
				isChecked: false,
				phoneNum:'',
				code:'',
				totalTime:60,
				codeBtnText:'发送验证码'
			}
		},
		computed: {
			...mapState({
				inviteCode: state => state.inviteCode,
			})
		},
		methods: {
			setCheck() {
				uni.showToast({
					title: '请同意用户隐私协议',
					icon: 'none'
				})
			},
			async decryptPhoneNumber(e) {
				let that = this
				let params = {
					code: e.detail.code,
					invite_code: that.inviteCode
				}
				that.isLogin = true
				try {
					let udata = await userApi.wxLogin(params)
					uni.setStorageSync(USER_TOKEN, udata.token)
					store.commit('setUserInfo', udata.users)
					const userData = {
						"_id": udata.users.id,
						"nickname": udata.users.name,
						"avatar_file": {
							"url": udata.users.avatar
						}
					}
					uniIm.login(userData).then((res) => {
						console.log('imRes', res)
					}).catch((error) => {
						console.log('imError', error)
					})
					if (!udata.users.openid || udata.users.openid === '') {
						// 没有openid，跳转到用户信息设置页面
						uni.redirectTo({
							url: '/subPages/user-info/user-info'
						});
					} else {
						// 有openid，直接进入首页
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
					that.isLogin = false
				} catch (e) {
					that.isLogin = false
				}
			},
			sendCode() {
				let that = this
				if(that.phoneNum.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
				}
				if(that.totalTime == 60){
					uni.showLoading({
						title:'发送中...'
					})
					userApi.sendCode({
						'phone':that.phoneNum,
						'type':'login'
					}).then((res)=>{
						uni.hideLoading()
						that.startTimer()
						console.log('send-res',res)
					})
				}
			},
			startTimer() {
				if (this.timer) return;
				this.totalTime--;
				this.codeBtnText = `${this.totalTime}s后发送`;
				this.timer = setInterval(() => {
				    if (this.totalTime <= 0) {
				        clearInterval(this.timer);
				        this.timer = null;
				        this.codeBtnText = '发送验证码';
						this.totalTime = 60
				    } else {
				        this.totalTime--;
				        this.codeBtnText = `${this.totalTime}s后发送`;
				    }
				}, 1000);
			},
			sure(){
				let that = this
				if(!that.isChecked){
					uni.showToast({
						title: '请同意用户隐私协议',
						icon: 'none'
					})
					return
				}
				if(that.phoneNum.length !== 11){
					uni.showToast({
						title:'请输入正确的手机号码',
						icon:'none',
					})
					return
				}
				if(that.code == ''){
					uni.showToast({
						title:'请输入短信验证码',
						icon:'none'
					})
					return
				}
				uni.showLoading({
					title:'加载中...'
				})
				userApi.userLogin({
					'phone':that.phoneNum,
					'code':that.code,
					'type':'login'
				}).then((udata)=>{
					uni.hideLoading()
					uni.setStorageSync(USER_TOKEN, udata.token)
					store.commit('setUserInfo', udata.users)
					const userData = {
						"_id": udata.users.id,
						"nickname": udata.users.name,
						"avatar_file": {
							"url": udata.users.avatar
						}
					}
					uniIm.login(userData).then((res) => {
						console.log('imRes', res)
					}).catch((error) => {
						console.log('imError', error)
					})
					if (!udata.users.openid || udata.users.openid === '') {
						
						uni.redirectTo({
							url: '/subPages/user-info/user-info'
						});
					} else {
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				}).catch(()=>{
					uni.hideLoading()
				})
			}
			
		}
	}
</script>

<style scoped>
	.inpt{
		background-color: #fff;
		width: 690rpx;
		position: relative;
		border: 1px solid #d0d2d9;
		height: 96rpx;
		padding-left: 30rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
		transition: all .2s linear;
	}
	.inpt:hover{
		border-color: #438afc
	}
	.login-button{
		border-radius: 60rpx;
		height: 96rpx;
		width: 690rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: solid 1px #438afc;
		cursor: pointer;
		color: #fff;
		padding: 0;
		transition: all .2s linear;
	}
	.bg-wx{
		background-color: #fff;
		color: #598dfc;
	}
	.login-button::after{border-width: 0!important;}
	.code-send{
		font-size: 30rpx;
		background-color: #fff;
		padding: 0 40rpx;
		color: #598dfc;
		margin-right: 10rpx;
	}
	.sending{
		color: #999;
		white-space: nowrap;
		font-size: 30rpx;
		letter-spacing: 0;
		cursor: default;
	}
	.phonebutton{
		background-color: #4bb43b;
		color: #FFFFFF;
		font-size: 28rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 5rpx;
		border-radius: 50rpx;
	}
	.wxbutton {
		background-color: #598dfc;
		color: #FFFFFF;
		font-size: 28rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 5rpx;
		border-radius: 50rpx;
	}

	button[disabled]:not([type]) {
		color: #bfbfbf;
		background-color: #F2F2F2;
		border-color: #F2F2F2;
		border-width: 0;
	}
</style>